import React from 'react'
import { success, CropImageUpload, FileUpload } from '../ui-components'
import style from './style'
import styleFrom from './css/style.form'
import Code from './Code'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { updateAvatar } from '../actions/app.action'
import { fileUpload } from '../actions/file.action'

export default 
@connect(null, dispatch => ({actions: bindActionCreators({ updateAvatar, fileUpload }, dispatch)}))
class extends React.Component {
  render() {
    return (
      <div className={style.root}>
        <Code>{'<CropImageUpload label={..} onUpload={..}/>'}</Code>
        <div>
          <CropImageUpload
            file={'http://avatar-staging.oss-cn-beijing.aliyuncs.com/0ba6ad9c-1107-4b9d-9c55-0afccb673a7b%7C42.34693877551021,10.7421875,30'}
            label="上传头像"
            onUpload={({ x, y, e, file }) => {
              this.props.actions.updateAvatar({
                x,y,e
              }, ({ presignedPutUrl, publicGetUrl }) => {
                this.props.actions.fileUpload({
                  url: presignedPutUrl,
                  file: file.file,
                  cb: () => {
                    success('上传成功')
                  }
                })
              })
            }}
          />
        </div>
      </div>
    )
  }
}
